import {
  useCallback,
  useContext,
  useDebugValue,
  useDeferredValue,
  useEffect,
  useId,
  useImperativeHandle,
  useInsertionEffect,
  useLayoutEffect,
  useMemo,
  useReducer,
  useRef,
  useState,
  useSyncExternalStore,
  useTransition,
} from "react";
import { memo, createContext } from "react";

import "./index.scss";

import { Button } from "@/components";

const Hooks = () => {
  const [count, setCount] = useState(1);
  const [form, serForm] = useState({ name: "" });

  const [isPending, startTransition] = useTransition();

  const handleClick = () => {
    startTransition(() => {
      setCount(count + 1);
    });
  };

  const handleForm = () => {
    serForm({ ...form, name: "px" });
  };

  return (
    <div className="hooks-content">
      <p>{isPending ? "loading" : count}</p>
      <p>
        <Button onClick={() => handleClick()}>click</Button>
        <Button onClick={() => handleForm()}>form</Button>
      </p>

      <Child />

      <ul>
        {Array(10000)
          .fill("")
          .map((_, i) => {
            return <li key={i + "i"}>{count}</li>;
          })}
      </ul>
    </div>
  );
};

const Child = () => {
  return <div>Child</div>;
};

export default Hooks;
